import { memo } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useFetch_getProductInfo } from "../../service/product";
import DataDisplay_content from "../../baseUI/dataDisplay_content/idnex";
import ProductDetail_head from "./cpms/productDetail_head";
import ProductDetail_course from "./cpms/productDetail_course";
import BuyBtn from "../../components/buy_btn";
import { routeItmeType } from "../../router";

const ProductDetail = memo(() => {
  const params = useParams();
  const { data, loading } = useFetch_getProductInfo(params?.id as string);
  const nav = useNavigate();
  return (
    <DataDisplay_content
      loading={loading}
      title={data?.name}
      returnClick={() => nav(`/${routeItmeType.HOME}`)}
    >
      <ProductDetail_head data={data} />
      <ProductDetail_course data={data} />
      <BuyBtn data={data} isPayment={false} />
    </DataDisplay_content>
  );
});

export default ProductDetail;
